<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0; padding: 0;
        }
        #box{
            width: 160px;height: 44px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .ad{
            width: 160px;height: 220px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .ad a{
            display: block;
            width: 160px;
            height: 44px;
            line-height: 44px;
            text-decoration: none;
            font-size: 13px;
            color: #6f6f6f;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="ad">
            
                <a href="">黄金十点购生活周边</a>
            
                <a href="">健康护卫日活动</a>
            
                <a href="">VMALL资讯客服发送口令</a>
            
                <a href="">暑假购物节活动公告</a>
            
                <a href="">华为数码超品日活动公告</a>
            
                <a href="">黄金十点购生活周边</a>
            
        </div>     
    </div>
    <script src="public.js"></script>
    <script>
        var box=document.getElementById('box');
        var div=box.children[0];
        var arr=div.children;
        var height=div.children[0].offsetHeight;
        var index=0;
        function autoplay(){
            index++;
            if(index>arr.length-1){
                index=1;
                div.style.top=0;
            }
            move(div,'top',-index*height);    
        }
        var timer=setInterval(autoplay,1000);
        box.onmouseenter=function(){
            clearInterval(timer);
        }
        box.onmouseleave=function(){
            clearInterval(timer);
            timer=setInterval(autoplay,1000);
        }
    </script>
</body>
</html>